<style>
    table td {
        /* vertical-align: middle; */
        text-align: center;
    }

    table th {

        /* vertical-align: middle; */
        text-align: center;
    }
</style>
<main class="lyear-layout-content">

    <div class="container-fluid p-t-15">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar d-flex flex-column flex-md-row">
                        <div class="toolbar-btn-action">
                            <a class="btn btn-danger" id="ajax-remove"><i class="mdi mdi-window-close"></i> 批量删除</a>
                        </div>

                        <form class="search-bar ml-md-auto" method="get" action="{:url('admin/user/record')}"
                            role="form">
                            <input type="hidden" name="search_field" id="search-field" value="content" />
                            <div class="input-group ml-md-auto">
                                <div class="input-group-prepend">
                                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false" id="search-btn">内容</button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" data-field="content">内容</a>
                                        <!-- <a class="dropdown-item" href="#!" data-field="cat_name">昵称</a> -->
                                    </div>
                                </div>
                                <input type="text" class="form-control" name="keyword" placeholder="请输入相应搜索内容">
                            </div>
                        </form>
                    </div>
                    <div class="card-body">

                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="check-all">
                                                <label class="custom-control-label" for="check-all"></label>
                                            </div>
                                        </th>
                                        <th>ID</th>
                                        <th>积分用户</th>
                                        <th>积分内容</th>
                                        <th>积分状态</th>
                                        <th>积分变化</th>
                                        <th>变化时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $recordList as $item}
                                    <tr>
                                        <td style="vertical-align: middle;">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input ids" name="ids[]"
                                                    value="{$item.id}" id="ids-{$item.id}">
                                                <label class="custom-control-label" for="ids-{$item.id}"></label>
                                            </div>
                                        </td>
                                        <td style="vertical-align: middle;">{$item['id']}</td>
                                        <td style="vertical-align: middle;">{$item['user']['nickname']}</td>
                                        <td style="vertical-align: middle;">{$item['content']}</td>
                                        {if condition="$item['state']==-1"}
                                        <td style="vertical-align: middle;"><span class="badge badge-danger">退款</span>
                                        </td>
                                        {elseif condition="$item['state']==1"}
                                        <td style="vertical-align: middle;"><span class="badge badge-yellow">发布</span>
                                        </td>
                                        {elseif condition="$item['state']==2"}
                                        <td style="vertical-align: middle;"><span class="badge badge-purple">采纳</span>
                                        </td>
                                        {elseif condition="$item['state']==3"}
                                        <td style="vertical-align: middle;"><span class="badge badge-info">充值</span>
                                        </td>
                                        {elseif condition="$item['state']==4"}
                                        <td style="vertical-align: middle;"><span class="badge badge-success">签到</span>
                                        </td>
                                        {elseif condition="$item['state']==5"}
                                        <td style="vertical-align: middle;"><span
                                                class="badge badge-warning">下商品订单</span></td>
                                        {else /}
                                        <td style="vertical-align: middle;"><span
                                                class="badge badge-warning">下预约订单</span></td>
                                        {/if}
                                        <td style="vertical-align: middle;">{$item['point']}</td>
                                        <td style="vertical-align: middle;">{$item['createtime']}</td>
                                        <td style="vertical-align: middle;">
                                            <div class="btn-group">
                                                <a class="btn btn-xs btn-default ajax-get confirm del" title=""
                                                    data-id="{$item.id}" data-toggle="tooltip"
                                                    data-original-title="删除"><i class="mdi mdi-window-close"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                        {$recordList->render()}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    layui.use(['layer'], function () {
        let $ = layui.jquery,
            layer = layui.layer

        //阻止分页默认跳转
        // $('.pagination>li>a').attr("href", 'javascript:void(0);');
        // $(function () {
        //     //去掉分页的点击跳转
        //     del_jump();
        //     //当分页被点击时，进行无刷新分页
        //     $(".pagination").on('click', ' li a', function () {
        //         //当前被点击的页码数 或者 箭头
        //         dianji = $(this).html();
        //         current_page = $('.pagination .active span').html();
        //         page = '';
        //         if (dianji == "«") {
        //             current_page = Number(current_page);

        //             page = String(current_page - 1);
        //         } else if (dianji == "»") {
        //             current_page = Number(current_page);
        //             page = String(current_page + 1);
        //         } else {
        //             page = dianji;
        //         }
        //     let AjaxPage = function (page) {
        //         $.ajax({
        //             url: `{:url('admin/user/record')}`,
        //             type: 'post',
        //             dataType: 'json',
        //             data: { page: page },
        //             success: function (data) {
        //                 console.log(data)
        //                 $(".card-body").html(data.page);
        //             }
        //         });
        //     }
        //     AjaxPage();
        // });
        // 发送ajax到后台
        //         $.post(`{:url('admin/user/record')}`,
        //             { 'page': page },
        //             function (data) {
        //                 //将返回的数据添加到页面上去
        //                 console.log(data);
        //                 $('#record_list').html(data.html);
        //                 $('#pag').html(data.pages);
        //                 del_jump();
        //             }, 'json');
        //     });
        //     //去掉分页的点击跳转
        //     function del_jump() {
        //         $('#pagination li a').attr("href", 'javascript:void(0);');
        //     }

        // });
        // 获取的id
        function GetId() {
            // 存放id的数组
            let list = []

            $('input[name="ids[]"]:checked').each(function () {
                // console.log(item);
                list.push($(this).val())
            })

            return list
        }


        //搜索框的点击
        $('.search-bar .dropdown-menu a').click(function () {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text());
        });

        //单选框的删除指定元素
        $('#ajax-remove').click(function () {
            let list = GetId();
            if (list.length == 0) {
                layer.msg('请选择您要删除的选项', { icon: 0 })
            } else {
                layer.confirm('确认删除选中的积分记录？', { icon: 3, title: '提示' }, function (index) {
                    $.ajax({
                        type: 'post',
                        url: `{:url('admin/user/del')}`,
                        data: {
                            list,
                            action: 'RecordRemove'
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (res.code === 1) {
                                layer.msg('删除成功', { icon: 1 }, function (index) {
                                    location.href = res.url
                                })
                            } else {
                                layer.msg(res.msg, { icon: 5 })
                            }
                        }
                    })
                    layer.close(index)
                })
            }
        })

        //管理员删除
        $('.del').click(function () {
            let id = $(this).data('id')
            layer.confirm('确认删除该积分记录？', { icon: 3, title: '提示' }, function (index) {
                //发起请求
                $.ajax({
                    type: 'post',
                    url: `{:url('admin/user/del')}`,
                    data: {
                        id,
                        action: 'RecordDel'
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 1) {
                            layer.msg('删除成功', { icon: 1 }, function (index) {
                                location.href = res.url
                            })
                        } else {
                            layer.msg(res.msg, { icon: 5 })
                        }
                    }
                })

                layer.close(index)
            })

        })
    })
</script>